import React, {Component} from 'react'
import InputSelect from './InputSelect'
import InputSelectOption from './InputSelectOption'
import {FormGroupLabel} from '../FormGroupLabel'

interface InputSelectVerticalUncontrolledProps {
  label?: string
  onChange: (value: any) => void
  placeholder?: string
  name: string
  isSearchable?: boolean
  isMulti?: boolean
  isDisabled?: boolean
  isLoading?: boolean
  isClearable?: boolean
  className?: string
  defaultValue?: any
  isRequired: boolean
  feedback?: string
  autoFocus?: boolean
  value: any
  data: any
  optionValue?: string
  optionLabel?: string
  defaultOption?: InputSelectOption
  size?: 'sm' | 'lg'
  helpText?: React.ReactNode
  id?: string
  instanceId?: string
}

interface InputSelectVerticalState {
  dataOptions: InputSelectOption[]
}

class InputSelectVerticalUncontrolled extends Component<
  InputSelectVerticalUncontrolledProps,
  InputSelectVerticalState
> {
  constructor(props: any) {
    super(props)
    this.state = {
      dataOptions: this.getDataOptions(),
    }
  }

  componentDidUpdate(prevProps: Readonly<InputSelectVerticalUncontrolledProps>) {
    if (prevProps.data !== this.props.data) {
      this.setState({dataOptions: this.getDataOptions()})
    }
  }

  getSelectedValue = (value: any): InputSelectOption => {
    if (value === null) {
      return this.state.dataOptions.filter(
        (option: any) => option.value === 'defaultOptionValue',
      )[0]
    } else if (value === undefined) {
      return undefined
    } else {
      return this.state.dataOptions.filter((option: any) => option.value === value)[0]
    }
  }

  getDataOptions = (): InputSelectOption[] => {
    const {data, optionLabel, optionValue, defaultOption} = this.props
    const dataOptions: InputSelectOption[] = []
    if (data) {
      if (Array.isArray(data)) {
        for (let item of data) {
          let dataOption: InputSelectOption = null
          if (item[optionValue] === null) {
            dataOption = {value: 'defaultOptionValue', label: item[optionLabel]}
          } else {
            dataOption = {value: item[optionValue], label: item[optionLabel]}
          }
          dataOptions.push(dataOption)
        }
      } else {
        for (let key in data) {
          let dataOption: InputSelectOption = {value: key, label: data[key]}
          dataOptions.push(dataOption)
        }
      }
    }
    if (defaultOption) {
      dataOptions.unshift(defaultOption)
    }
    return dataOptions
  }

  onChange = (value: any) => {
    const {onChange} = this.props
    if (value?.value === 'defaultOptionValue') {
      onChange(null)
    } else {
      onChange(value?.value)
    }
  }

  render() {
    const {
      label,
      className,
      isRequired,
      feedback,
      isDisabled,
      isLoading,
      isClearable,
      isSearchable,
      placeholder,
      name,
      autoFocus,
      value,
      size,
      helpText,
      id,
      instanceId,
    } = this.props
    return (
      <FormGroupLabel
        feedback={feedback}
        className={className}
        helpText={helpText}
        isRequired={isRequired}
        label={label}
        id={id}>
        <InputSelect
          autoFocus={autoFocus}
          onChange={(value) => {
            this.onChange(value)
          }}
          isDisabled={isDisabled}
          isLoading={isLoading}
          isClearable={isClearable}
          isSearchable={isSearchable}
          name={name}
          options={this.state.dataOptions}
          placeholder={placeholder}
          value={this.getSelectedValue(value)}
          size={size}
          instanceId={instanceId}
        />
      </FormGroupLabel>
    )
  }
}

export default InputSelectVerticalUncontrolled
